<!--
 * @Author: your name
 * @Date: 2020-02-21 16:51:07
 * @LastEditTime: 2020-02-23 00:41:15
 * @LastEditors: Please set LastEditors
 * @Description: 登录
 * @FilePath: /dongyang/src/views/Login.vue
 -->
<template>
  <div class="page-register">
    <div class="form">
      <van-cell-group class="van-form">
         <van-cell title="请输入手机号*">
           <van-field v-model="form.mobile" placeholder="请输入手机号" />
         </van-cell>
         <van-cell title="请输入名字*">
           <van-field v-model="form.fullname" placeholder="请输入名字" />
         </van-cell>
         <van-cell title="所属乡镇街道*">
          <van-field
            readonly
            clickable
            :value="townLabel"
            placeholder="请选择所属乡镇街道"
            @click="showPicker = true"
          />
        </van-cell>
        <van-cell title="所属网格*">
          <span class="desc">填写“XX村/社区-XX网格”</span>
          <van-field v-model="form.grid_name" placeholder="请输入所属网格" />
        </van-cell>
        <van-cell title="身份*">
          <!-- <van-checkbox-group v-model="form.role_ids">
            <van-checkbox
              shape="square"
              :name="Number(item.value)"
              v-for="item in roles"
              :key="item.value"
              >{{ item.label }}
              </van-checkbox
            >
          </van-checkbox-group> -->
          <van-radio-group v-model="roleId" direction="vertical">
            <van-radio
              :name="item.value"
              v-for="item in roles"
              :key="item.value"
              >{{ item.label }}</van-radio
            >
          </van-radio-group>
        </van-cell>
          <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            value-key="label"
            :columns="town"
            @cancel="showPicker = false"
            @confirm="townConfirm"
          />
        </van-popup>
      </van-cell-group>
     <van-button type="primary" size="large" @click.native="register">注册</van-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { register,formConst } from "@/apis/index.ts";
import { setToken,setTimeDate } from "@/utils";
@Component
export default class Register extends Vue {
  private roleId: string = ''
  private townLabel: string = '' //街道名称
  private showPicker: boolean = false
  private town: any = [];
  private roles: any = []
  private mobile: any = "";
  private password: any = "";
  private form: any = {
    mobile: '',
    fullname: '',
    town_id: '',
    grid_name: '',
    role_ids: []
  }
private map:any = null
created() {
  this.formConst()
}
//获取常量
public async formConst() {
  const data = await formConst();
  const town = data.town;
  const roles = data.role
  for (const i in town) {
    this.town.push({
      label: town[i],
      value: i
    });
  }
  for(const i in roles) {
    this.roles.push({
      label: roles[i],
      value: i
    })
  }
  console.log(this.roles);
  
}
  public async register() {
    if (!this.form.mobile) {
      this.$toast("手机号不能为空");
      return false;
    }else if(!(/^1[3456789]\d{9}$/.test(this.form.mobile))){
       this.$toast('请填写正确的手机号码')
       return false
    }

    if(!this.form.fullname) {
      this.$toast('请输入名字')
      return false
    }
    if(!this.form.town_id) {
      this.$toast("请选择所属街道")
      return false
    }
    if(!this.form.grid_name) {
      this.$toast('请输入所属网格')
      return false
    }
    this.form.role_ids = [this.roleId]
    if(this.form.role_ids.length === 0) {
      this.$toast('请输入身份')
      return false
    }
    const data = await register(this.form);
    this.$toast("注册成功，密码手机号后6位")
    setToken(data.token);
    setTimeDate(data.timeout)
    setTimeout(() => {
      this.$router.push("/home");
    },1000)
  }
  public townConfirm(value: any) {
    this.townLabel = value.label;
    this.form.town_id = value.value
    this.showPicker = false;
  }
}
</script>
<style lang="scss">
.page-register {
  background-color: #fff;
  min-height: 100vh;
  .form {
    padding:0 30px;
    padding-top: 30px;
    .van-form .van-cell .van-cell__title {
      text-align: left;
    }
    .van-button--primary {
      background-color: #1989fa;
      border: 1px solid #1989fa;
      margin-bottom: 50px;
      border-radius: 50px;
  }
      .van-radio-group {
      display: inherit !important;
      .van-radio + .van-radio {
        margin-left: 0px !important;
        // margin-top: 20px;
        // display: inline-block;
      }
      .van-radio {
        margin-top: 20px;
      }
    }
      .van-checkbox {
      margin-top: 20px;
    }
  }
}
</style>
